<template>
  <div class="store-manage">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :model="filterForm" inline>
        <el-form-item label="销售区域">
          <el-select v-model="filterForm.saleArea" placeholder="请选择管理片区">
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="行政区划">
          <el-select v-model="filterForm.district" placeholder="请选择行政区划">
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道分类">
          <el-select v-model="filterForm.channel" placeholder="请选择渠道分类">
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="门店地址">
          <el-select v-model="filterForm.address" placeholder="请输入门店地址">
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="原理时间">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 转化类型切换 -->
    <div class="conversion-tabs">
      <el-radio-group v-model="activeTab">
        <el-radio-button label="converted">转化成功</el-radio-button>
        <el-radio-button label="converting">转化失败</el-radio-button>
        <el-radio-button label="unconverted">未转化</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 数据展示区域 -->
    <div class="data-overview">
      <!-- 转化率环形图 -->
      <el-card class="chart-card">
        <div class="chart-title">高潜门店转化率</div>
        <div class="chart-content">
          <el-progress
            type="dashboard"
            :percentage="80"
            :color="'#409EFF'"
          />
          <div class="chart-footer">
            <div class="data-item">
              <div>800个</div>
              <div>成功转化</div>
            </div>
            <div class="data-item">
              <div>1000个</div>
              <div>已排查门店/门店</div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 交易率环形图 -->
      <el-card class="chart-card">
        <div class="chart-title">高潜门店交易率</div>
        <div class="chart-content">
          <el-progress
            type="dashboard"
            :percentage="70"
            :color="'#67C23A'"
          />
          <div class="chart-footer">
            <div class="data-item">
              <div>800个</div>
              <div>存在交易门店</div>
            </div>
            <div class="data-item">
              <div>1000个</div>
              <div>已排查门店/门店</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="province" label="所在城市(省级)" />
        <el-table-column prop="city" label="所在城市(市级)" />
        <el-table-column prop="district" label="所在区域(县级)" />
        <el-table-column prop="poiId" label="POI ID" />
        <el-table-column prop="storeName" label="门店名称" />
        <el-table-column prop="address" label="门店地址" />
        <el-table-column prop="location" label="地理分布" />
        <el-table-column prop="storeType" label="门店类型" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 筛选表单数据
const filterForm = reactive({
  saleArea: '',
  district: '',
  channel: '',
  address: '',
  dateRange: []
})

// 当前选中的转化类型标签
const activeTab = ref('converted')

// 表格数据
const tableData = ref([
  {
    province: '湖南省',
    city: '怀化市',
    district: '洪江市',
    poiId: 'BDJZY7FSTG',
    storeName: '水牛车塘联华超市',
    address: '孙安塘村社兰桥交叉口西北20米',
    location: '农村',
    storeType: '超市'
  }
  // ... 更多数据
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 处理查询
const handleSearch = () => {
  console.log('查询条件：', filterForm)
}

// 处理详情点击
const handleDetail = (row) => {
  console.log('查看详情：', row)
}

// 处理分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

// 处理页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style lang="scss" scoped>
.store-manage {
  padding: 20px;

  .filter-section {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .conversion-tabs {
    margin-bottom: 20px;
  }

  .data-overview {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    .chart-card {
      flex: 1;
      
      .chart-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .chart-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .chart-footer {
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-top: 20px;

        .data-item {
          text-align: center;
          
          :first-child {
            font-size: 18px;
            font-weight: bold;
            color: #409EFF;
          }

          :last-child {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }

  .table-section {
    background: #fff;
    padding: 20px;

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
